<template>
  <div>
        <Header></Header>
    <div id="all">
        <div id="left">
          <div class="left_top">
            <div class="left_top_top">
              <el-avatar :src="article.image"></el-avatar>
              <div class="left_top_right">
                <span>{{article.username}}</span>
                <span style="color: #999AAA;">码龄3年   暂无认证</span>
              </div>
            </div>
           <el-button round size="mini" @click="follow" style="width: 150px;">关注</el-button>
           <el-button round size="mini" style="width: 150px;">私信</el-button>
          </div>
          <div class="left_buttom">
            <h5>热门文章</h5>
            <hr />
            <div v-for="(value,key) in article.article" :key="key">
                <span>{{value.title}}</span>
                <span>{{value.pageViews}}</span>
            </div>
          </div>
           <div class="left_buttom">
             <h5>最新评论</h5>
             <hr />
           </div>
           <div class="left_buttom">
             <h5>最新文章</h5>
             <hr />
           </div>
        </div>
        <div id="main">
          <h2 style="margin: 20px;">{{article.title}}</h2>
          <div class="detail">
            <div class="top">
              <img src="../assets/original.png" width="36px" height="32px" />
              <router-link style="margin: 0 20px ;" to="">{{article.username}}</router-link>
              {{article.update_time}}
              <router-link  to="" style="margin-left:20px;" class="el-icon-view"><span style="color: #3399ea;">12</span></router-link>
            </div>
            <div class="bottom">
              <span style="margin-left:56px;">分类专栏:</span><router-link style="margin: 0 20px ;" to=""><el-tag size="mini" color="#fff">{{article.column_name}}</el-tag></router-link>
              文章标签:<router-link style="margin: 0 20px ;" to=""><el-tag size="small" color="#fff" >{{article.username}}</el-tag></router-link>
            </div>
          </div>
          <div class="zhuanlan">
            <el-avatar style="margin: 10px;" shape="square" :size="40" src=""></el-avatar>
            <span style="color: #000000; margin: 10px;">{{article.column_name}}</span>
            专栏收录该内容
          </div>

          <div class="simple" @mousewheel="change">
              <MarkdownPreview :height="400" theme="oneDark" :initialValue="article.content"/>
          </div>
          <!-- <div class="fixed">
              <img src="../assets/20201124032511.png" />
          </div> -->
           <Footer></Footer>
        </div>
        <div id="right1">
          <div class="left_buttom">
            <el-empty description="" image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>
          </div>
          <div class="left_buttom">
            <h5>专栏</h5>
            <hr />
              <div class="right_content" v-for="(value,key) in article.column" :key="key">
                  <el-avatar style="margin: 10px;" shape="square" :size="40" src=""></el-avatar>
                  <span>{{value.name}}</span>
              </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header'
import { MarkdownPreview } from 'vue-meditor'
import Footer from '@/components/Footer'
export default {
  name: 'HelloWorld',
  data () {
    return {
      id: this.$route.query.id,
      article: '',
      userinfo: JSON.parse(window.localStorage.getItem('userinfo'))
    }
  },
  mounted () {
    console.log(this.userinfo.token)
    var url = 'http://120.27.129.163/iblog/index.php/article/' + this.id
    this.$http.get(url, {headers: {token: this.userinfo.token}}).then(
      (backdata) => {
        var res = backdata.data
        if (res.code === 200) {
          this.article = res.data
        } else {
          this.$message({
            showClose: true,
            msg: res.msg,
            type: 'error'
          })
        }
      }
    )
  },
  components: {
    Header,
    MarkdownPreview,
    Footer
  },
  methods: {
    change () {
      var height = document.documentElement.scrollTop
      var right = document.getElementById('right1')
      var left = document.getElementById('left')
      console.log(right.offsetHeight)
      if (right.offsetHeight > height) {
        right.style.position = 'absolute'
      } else {
        right.style.position = 'fixed'
      }
      if (left.offsetHeight > height) {
        left.style.position = 'absolute'
      } else {
        left.style.position = 'fixed'
        left.style.top = height
      }
    },
    follow () {
      let userinfo = this.userinfo
      let url = 'http://ci.com/follow'
      console.log(userinfo.id)
      let data = {
        'user_id': userinfo.id,
        'follow_id': this.article.user_id,
        'type': 1
      }
      data = this.$qs.stringify(data)
      this.$http.post(url, data).then((backdata) => {
        var res = backdata.data
        if (res.code === 200) {
          console.log(res.msg)
        } else {
          this.$message({
            showClose: true,
            msg: res.msg,
            type: 'error'
          })
        }
      }
      )
    }
  }
}
</script>

<style>
  #all{
    width: 100%;
    height: 1080px;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  #left{
    width: 20%;
    height: 1500px;
    position: absolute;
    overflow: auto;
    left: 85px;
    background-color: #FFF;
  }
  #main{
    /* margin-left: 10px; */
    width: 50%;
    height: 100%;
    background-color: #FFF;
  }
  #right1{
    margin-left: 10px;
    position: absolute;
    right: 85px;
    width: 20%;
    /* height: 100%; */
    background-color: #FFFFFF;
  }
  .detail{
    width: 92%;
    height: 60px;
    margin: 20px;
    padding: 10px;
    color: #999aaa;
    background-color: #f8f8f8;
  }
  .top a {
    color: #555666;
    text-decoration: none;
  }
  .top a:hover {
    color: #fc5531;
  }
  .top{
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .zhuanlan{
    width: 95%;
    height: 56px;
    margin: 20px;
    color: #999aaa;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #f0f0f0;
    box-shadow: 0 0 10px 0 rgb(232 232 237 / 40%);
  }
  /* .fixed {
      width: 50%;
      height: 60px;
      border-top: 1px solid #f0f0f0;
      background-color: #FFFFFF;
      position: fixed;
      top: 95%;
  } */
  .left_top{
    border-bottom: 10px solid #000000;
    padding: 5px;
    padding-left: 20px;
  }
  .left_top_top{
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .left_top_right{
    display: flex;
    flex-direction: column;
    padding: 10px;
  }
  .left_buttom{
/*    height: 300px; */
    border-bottom: 10px solid #000000;
  }
  .left_buttom h5{
    margin-left:10px ;
  }
  .left_buttom hr{
    border: 0.0625rem solid #f0f0f0;
  }
  .right_content{
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .right_content:hover{
    color:#fc5531;
    cursor: pointer;
  }
</style>
